<template>
    <div class="reviewarticle">
        <div v-show="!info" class="loading">
            <div v-if="!timeOut" style="margin-top: 50vw">
                <img :src="loadingImg" alt="">
                <p style="font-size: 18px;color:rgb(253, 163, 62);margin-top: 20px">加载中.....</p>
            </div>
            <div v-if="timeOut" style="font-size: 20px;margin-top: 50vw">
                <Icon type="refresh" style="color: dodgerblue;font-size: 40px"></Icon>
                <p>加载失败，请点击屏幕重新加载...</p>
            </div>
        </div>
        <div v-show="info" class="articlecontainer">
            <div class="header">
                <p @click="back" class="back">
                    <Icon type="chevron-left"></Icon>
                </p>
            </div>
            <div class="authorcontainer">
                <img :src="authorInfo.portrait" alt="">
                <p>{{authorInfo.nickname}}</p>
                <star :targetId="info.author_id"></star>
            </div>
            <p class="title">{{info.title}}</p>
            <ul class="articledesc">
                <li v-for="item in info.tags">#{{tags[item]}}</li>
                <li>{{info.publish_time && info.publish_time.slice(0,10)}}</li>
                <li>阅读：{{info.visit_count||1}}</li>
            </ul>
            <div id="article" style="font-size: 15px;"></div>
        </div>
    </div>
</template>

<script>
    import AQuill from 'quill';
    import * as appInfo from '@/conf/appInfo';
    import star from '@/components/star';
    import 'quill/dist/quill.snow.css';
    import loading from './image/loading.gif';


    export default {
        name: 'reviewArticle',
        data() {
            return {
                Aquill: {},
                info: '',
                tags: this.CONF.tags,
                loadingImg: loading,
                timeOut: false,
                authorInfo: {}
            };
        },
        components: {
            star
        },
        methods: {
            back() {
                if (document.referrer.match(appInfo.host) > 0) {
                    window.history.back();
                } else {
                    this.$router.push({
                        name: 'index'
                    });
                }
            }
        },
        mounted() {
            this.Aquill = new AQuill('#article', {
                modules: {
                    toolbar: false
                },
                theme: 'snow'
            });
            this.Aquill.enable(false);
            if (!this.$route.query.id) {
                console.log(this.$route.query.id);
                this.$Modal.info({
                    content: '请从正确链接进入',
                    onOk: () => {
                        this.$router.push({name: 'index'});
                    }
                });
            } else {
                const articleId = this.$route.query.id;
                this.$Api.getArticle(articleId).then((res) => {
                    console.log(res);
                    if (res.ok) {
                        this.info = res.body.data;
                        this.Aquill.container.firstChild.innerHTML = this.info.content;
                    }
                    return this.$Api.getUserInfo({userId: res.body.data.author_id});
                }).then((res) => {
                    if (res.ok) {
                        this.authorInfo = res.data.data;
                    }
                }).catch((error) => {
                    this.$Modal.error({
                        content: error.body || '文章出错，请稍后再试',
                        onOk: () => {
                            this.$router.push({name: 'index'});
                        }
                    });
                });
            }
        }
    };
</script>

<style lang="scss">
    .reviewarticle {
        letter-spacing: 2px;
        .articlecontainer {
            .header {
                box-shadow: 0px 10px 10px #c8c8c8;
                position: fixed;
                top: 0px;
                height: 44px;
                width: 100%;
                z-index: 999;
                background: rgb(253, 163, 62);
                display: flex;
                .back {
                    line-height: 44px;
                    position: fixed;
                    left: 0px;
                    color: white;
                    width: 44px;
                    height: 44px;
                }
            }
            .authorcontainer {
                margin-top: 44px;
                display: flex;
                justify-content: left;
                align-items: center;
                font-size: 20px;
                font-weight: 600;
                height: 65px;
                line-height: 65px;
                img {
                    margin: 0 20px;
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                }
                p{
                    margin-right: 5vw;
                }
            }
            .title {
                letter-spacing: 3px;
                font-weight: 600;
                text-align: left;
                padding: 0px 10px;
                font-size: 25px;
                color: rgb(253, 163, 62);
            }
            .articledesc {
                display: flex;
                justify-content: space-around;
                padding: 10px 20px;
                li {
                    font-size: 13px;
                    color: #666666;
                    margin-right: 10px;
                }
            }
        }
    }
</style>
